<template lang="jade">
  .vue__component__root
    //- div
    //-   label(@click="click") {{xyz}}
    div.weui_panel_bd
      .weui_cell.weui_cell_select.weui_select_after
        .weui_cell_bd.weui_cell_primary
          select.weui_select.program-selector(id="abc", v-model="currProgramId")
            option(v-for="{id, name} in programList", :value="id", :key='id') {{name}}
      div.weui_media_desc.course_detail.bd.hd {{currProgram.name}} {{currProgram.description}}
      Calendar.at_bottom(ref="calendar")
</template>
<script>

/*global $*/
import Vue from 'Vue';
import Calendar from './calendar.vue'
import {mapGetters, mapActions} from 'vuex'
import _ from 'lodash'
export default {
  methods: {
    ...mapActions(['fetchData']),
    async loadData () {
      let programList = await this.fetchData()

      this.$store.dispatch('setProgramList', programList);

      let firstProgram = programList[0]
      this.$store.dispatch('setCurrProgram', firstProgram)

      this.workouts = firstProgram.workouts
      this.currProgramId = firstProgram.id
      this.$refs.calendar.refresh()
    }
  },
  computed: {
    ...mapGetters({
      programList: 'programList',
      currProgram: 'currProgram'
    })
  },
  props: [],
  watch: {
    currProgramId () {
      if (!this.currProgramId) {
        return
      }
      // console.log('1111', this.currProgramId)
      let currProgram = _.find(this.programList, ['id', this.currProgramId])
      this.$store.dispatch('setCurrProgram', currProgram)
      this.$refs.calendar.refresh()
    }
  },
  components: {Calendar},
  events: {},
  data() {
    return {
      workouts: [],
      currProgramId: null
    }
  },
  created() {
  },
  mounted() {
    this.loadData()
  }
}
</script>
<style scoped>
.vue__component__root {
  height: 100vh;
}

.dropdown {
  width: 100%;
  /* border: solid 1px #000;
  padding: 1px 10px 1px 1px; */
  height: 5vh;
  /* font-size: 1.2rem; */
}

.course_detail {
  line-height: 1.75rem;
  height: 20vh;
  overflow-y: scroll;
}

.at_bottom {
  position: absolute;
  bottom: 0;
  height: 70vh;
}
.program-selector {
  padding-left: 0px;
}

</style>
